import React, { Component, PureComponent } from 'react'

class Home extends PureComponent {
  render() {
    return <h2>Home</h2>
  }
}

class About extends PureComponent {
  render() {
    return <h2>About</h2>
  }
}

function WithRenderTime(WrappedComponent) {
  return class extends PureComponent {

    UNSAFE_componentWillMount() {
      this.beginTime = Date.now()
    }

    render() {
      return <WrappedComponent {...this.props} />
    }

    componentDidMount() {
      this.endTime = Date.now()
      
      const interval = this.endTime - this.beginTime
      //每个类组件都有name属性的
      console.log(`${WrappedComponent.name}渲染时间：${interval}`);
    }
  }
}

const HomeTime = WithRenderTime(Home)
const AboutTime = WithRenderTime(About)

export default class App extends Component {
  render() {
    return (
      <div>
        <HomeTime />
        <AboutTime />
      </div>
    )
  }
}
